<template>
  <view class="container page-bg">
    <view class="p-2 ">
      <view v-if="assess_type == 0" class="d-flex d-flex-between text-center bg-fff p-2  rounded15  font32"
      >
        <text>基础保证金</text>
        <text class="colorf00">¥{{ bond }}元</text>
      </view>

      <view class="d-flex d-flex-wrap d-flex-unShrink" v-if="assess_type != 0">
        <view class="vip-box d-flex-column mr-1 bg-fff rounded15 d-flex-item text-center p-1"
              :class="[`assessList${iii}`, { 'active': assessIndex === iii }]"
              @click="onAssess(iii)" v-for="(item,iii) in assessList" :key="item.id">
          <image :src="item.icon" class="rounded15 mb-1" mode="widthFix"
                 style="width: 100%;height: 200rpx;"></image>
          <text class="py-1 font-bold">{{ item.text }}</text>
          <text v-if="item.type == 1">单价提高50</text>
          <text v-if="item.type == 2">单价提高100</text>
          <text v-if="item.type == 3">无限制</text>
        </view>
      </view>
    </view>

    <!-- 用户信息输入区域 -->
    <view class="user-info  mx-2">
      <view class="info-item d-flex align-center p-2 bg-fff mt-1 rounded10">
        <text class="label font-bold">游戏名：</text>
        <input
            class="input flex-1"
            v-model="mdForm.gameName"
            placeholder="请输入游戏名"/>
      </view>
      <view class="info-item d-flex align-center p-2 bg-fff mt-1 rounded10">
        <text class="label font-bold">微信名字：</text>
        <input
            class="input flex-1"
            v-model="mdForm.wechatName"
            placeholder="请输入微信名字"/>
      </view>

      <picker mode="date" :value="mdForm.assessmentTime" :start="startDate" :end="endDate" @change="startDateChange"
              class="d-flex-item">

        <view class="info-item d-flex p-2 bg-fff mt-1 rounded10 d-flex-between">
          <view class="d-flex">
            <text class="label font-bold">考核时间：</text>
            <input
                class="input flex-1"
                v-model="mdForm.assessmentTime"
                placeholder="请选择考核时间"
                disabled/>
          </view>
          <text class="calendar-icon text-right">📅</text>
        </view>
      </picker>
    </view>

    <view class="fixedBtn bg-fff pb-5 pt-3 px-2  d-flex d-flex-between  d-flex-middle ">
      <view class="d-flex-item font24 colorf00">¥
        <text class="font36 ">{{ money }}元</text>
      </view>
      <view class="mx-2 publish-sure-bg d-flex d-flex-item d-flex-middle d-flex-center rounded40 colorfff"
            @click="submitForm()">提交审核
      </view>
    </view>

    <uni-popup ref="payPopup" @touchmove.stop.prevent="moveHandle" :safe-area="false" type="bottom"
               style="position: relative;z-index: 999991;">
      <view class="wrap">
        <view class="py-3 d-flex d-flex-between d-flex-middle mb-3">
          <view style="width: 150rpx;"></view>
          <text class="font30 color000">立即支付</text>
          <view class="d-flex d-flex-middle d-flex-end pr-3" style="width: 120rpx;">
            <text class="iconfont icon-cuo font30 color999" @click="closePayPopup"></text>
          </view>
        </view>
        <view class="pb-4">
          <!-- #ifndef MP-WEIXIN -->
          <view class="d-flex d-flex-between d-flex-middle px-3 mb-4" @click="changePay(1)">
            <view class="d-flex d-flex-middle">
              <image class="rounded"
                     src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/appUpload/20241228140259-f541dd69-c75e-43ad-a9e9-7aa92250dc3c.png"
                     style="width: 50rpx;height: 50rpx;"></image>
              <text class="ml-1">微信支付</text>
            </view>
            <text class="iconfont font36"
                  :class="payType == 1?'main-color icon-xuanzhong1':'colorhold icon-gouxuan1'"></text>
          </view>
          <view class="d-flex d-flex-between d-flex-middle px-3 mb-4" @click="changePay(2)">
            <view class="d-flex d-flex-middle">
              <image class="rounded"
                     src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/appUpload/20241228135921-cfaf5d4f-f4f2-4978-988d-5a1c9b0e7b96.png"
                     style="width: 50rpx;height: 50rpx;"></image>
              <text class="ml-1">支付宝支付</text>
            </view>
            <text class="iconfont font36"
                  :class="payType == 2?'main-color icon-xuanzhong1':'colorhold icon-gouxuan1'"></text>
          </view>
          <!-- #endif -->
          <!-- #ifdef MP-WEIXIN -->
          <view class="d-flex d-flex-between d-flex-middle px-3 mb-4" @click="changePay(1)">
            <view class="d-flex d-flex-middle">
              <image class="rounded"
                     src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/appUpload/20241228140259-f541dd69-c75e-43ad-a9e9-7aa92250dc3c.png"
                     style="width: 50rpx;height: 50rpx;"></image>
              <text class="ml-1">微信支付</text>
            </view>
            <text class="iconfont font36"
                  :class="payType == 1?'main-color icon-xuanzhong1':'colorhold icon-gouxuan1'"></text>
          </view>
          <!-- #endif -->
          <view class="d-flex d-flex-between d-flex-middle px-3 mb-5" @click="changePay(2)">
            <view class="d-flex d-flex-middle">
              <image class="rounded" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/pay_wap.png"
                     style="width: 50rpx;height: 50rpx;"></image>
              <text class="ml-1 mr-1">余额支付</text>
              <text class="font22 colorhold">￥{{ balance }}</text>
            </view>
            <text class="iconfont font36"
                  :class="payType == 2?'main-color icon-xuanzhong1':'colorhold icon-gouxuan1'"></text>
          </view>
          <view class="px-5">
            <view style="height: 70rpx;border-radius: 50rpx;"
                  class="bg-main d-flex d-flex-center d-flex-middle" @click="confirmPay">
              <text class="font30 colorfff">确认支付</text>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>

  </view>
</template>


<script>
import {
  mapState
} from "vuex"
import {payApi} from '@/http/payApi';
import pay from '@/mixins/pay.js'
function getDate(type) {
  const date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();

  if (type === 'start') {
    year = year - 10;
  } else if (type === 'end') {
    year = year + 10;
  }
  month = month > 9 ? month : '0' + month;
  ;
  day = day > 9 ? day : '0' + day;
  return `${year}-${month}-${day}`;
}

export default {
  mixins: [pay],
  data() {
    return {
      bond: '',
      assessList: [{
        text: '考核A级',
        type: 1,
        icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/a%2B.png'
      },
        {
          text: '考核S级',
          type: 2,
          icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/s%2B.png'
        },
        {
          text: '考核大神级',
          type: 3,
          icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/d%2B.png'
        },],
      mdForm: {
        gameName: '',
        wechatName: '',
        assessmentTime: ''
      },
      assessIndex: 0,
      money: 1,
      remark: "",
      payType: 1,
      startDate: getDate('start'),
      endDate: getDate('end')
    }
  },
  computed: {
    ...mapState({
      loginState: state => state.loginState,
      assess_type: state => state.assess_type,
      balance: state => state.balance,
    })
  },

  onLoad(option) {
    this.bond = option.bond;
    this.onAssess(this.assessIndex)
  },

  methods: {
    changePay(number) {
      this.payType = number
    },
    async onAssess(e) {
      this.assessIndex = e
      const assessItem = this.assessList[this.assessIndex]
      try {
        let res = await payApi.getAssessMoney(assessItem.type);
        this.money = res;
      } catch (error) {
        uni.showToast({
          title: '获取多少保证金失败',
          icon: 'none'
        });
      }
    },
    startDateChange(e) {
      this.mdForm.assessmentTime = e.detail.value;
    },
    // 提交表单
    async submitForm() {
      // 表单验证
      if (!this.mdForm.gameName) {
        uni.showToast({
          title: '请输入游戏名',
          icon: 'none'
        });
        return;
      }

      if (!this.mdForm.wechatName) {
        uni.showToast({
          title: '请输入微信名字',
          icon: 'none'
        });
        return;
      }

      if (!this.mdForm.assessmentTime) {
        uni.showToast({
          title: '请选择考核时间',
          icon: 'none'
        });
        return;
      }
      // 处理购买逻辑
      this.remark = `${this.mdForm.gameName};${this.mdForm.wechatName};${this.mdForm.assessmentTime}`
      this.$refs.payPopup.open();
    },
    closePayPopup(){
      this.$refs.payPopup.close()
    },
    async confirmPay() {
      let that = this
      try {
        uni.showLoading({title: '订单创建中...'})
        // 充值
        const order = await payApi.createAssess({type: this.assessList[this.assessIndex].type, remark: this.remark})
        uni.hideLoading()
        if (order) {
          that.clientTransferPay(order, false, 'assess')
        }
        this.closePayPopup();
        // 返回上一页
        uni.navigateBack({
          delta: 1 // 可选参数，表示返回的页面数，默认为1
        })
      } catch (error) {
        console.log('error', error)
        this.closePayPopup()
      }
    },
  },

}
</script>

<style scoped>
.container {
  position: relative;
}

.fixedBtn {
  position: fixed;
  bottom: 0;
  width: calc(100% - 40rpx);
}

.publish-sure-bg {
  background-color: #598dfc;
  height: 80rpx;
}

.vip-box {
  background: #efefef;
}

.vip-box.active {
  background: #598dfc;
  color: #fff;
  box-shadow: 0 0 10rpx rgba(89, 141, 252, 0.5);
}

.label {
  width: 150rpx;
  color: #333;
  text-align: right;
}
</style>